import {View, Button, Text, Image, ScrollView, Radio} from '@tarojs/components';
import Taro from '@tarojs/taro';
import React, {Component} from 'react';
import * as T from '../types';
import './tab.less';
import actions from '../actions/index';
import {connect} from 'react-redux';
import {store2Props} from '../selectors';
import {AtNoticebar} from 'taro-ui';
import 'taro-ui/dist/style/components/noticebar.scss';
import refresh from '@/assets/image/ipland/refresh.png';
type ITopProps = T.IProps;
//@ts-ignore
@connect<Partial<ITopProps>, T.ITopState & {selectIndex: number}>(store2Props, actions)
export default class Info extends Component<Partial<ITopProps>, {selectIndex: number}> {
  constructor(props: ITopProps) {
    super(props);
    this.state = {
      // selectIndex: 0,
    };
  }

  render() {
    const {
      actions: {action},
      main: {searchParams},
      selectIndex,
      setSelectIndex,
    } = this.props;
    const tabList = ['待领取', '已领取', '已失效'];
    const sortFlags = {
      desc: '获取时间',
      asc: '到期时间',
    };
    // const { selectIndex } = this.state;
    return (
      <>
        <View className="rechargeHistoryNavBar">
          {tabList.map((e, i) => (
            <View
              className={`navbarItem navbarItem-${selectIndex === i ? 'select' : ''}`}
              key={i}
              onClick={() => {
                setSelectIndex(i);
                // this.setState({
                //   selectIndex: i,
                // });
                action.commonChange('main.list', []);
                action.commonChange('main.searchParams', {
                  prizeStatus: i,
                  pageNum: 0,
                  pageSize: searchParams.pageSize,
                  sortFlag: searchParams.sortFlag,
                });
                action.page(true);
              }}
            >
              {e}
            </View>
          ))}
          <View
            className="changeSortBox"
            onClick={() => {
              let sortFlag = searchParams.sortFlag === 'desc' ? 'asc' : 'desc';
              action.commonChange('main.searchParams', {
                pageNum: 0,
                pageSize: 10,
                prizeStatus: searchParams.prizeStatus,
                sortFlag,
              });
              action.page(true);
            }}
          >
            <Image className="changeSortIcon" src={refresh} mode="widthFix" />
            <Text className="changeSortIcon-text">{sortFlags[searchParams.sortFlag]}</Text>
          </View>
        </View>
        {selectIndex == 1 && (
          <AtNoticebar className="Noticebar" icon="volume-plus">
            满118元享受包邮
          </AtNoticebar>
        )}
      </>
    );
  }
}
